<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            
            #tap {
                width: 200px;
                height: 200px;
                background: red;
            }


        </style>
    </head>
    <body>

        <div id="box">hello</div>

        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>




        <div id="wrap"></div>

        <div id="tap" style="width: 200px"></div>


        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        
    </body>
</html>
<script src="MyFunc.js"></script>
<script>

    // $('#box')[0].style.background = "red";

    $('p').css("background", "red");


    $('#box').css('width', '200px').css('height', '200px').css('border', '2px solid blue');

    var boxDiv = document.getElementById('box');

    $(boxDiv).css('background', 'orange');

    // console.log($('p').css('height'));

    // $('p').css({
    //     backgorund: 'red',
    //     width: "200px",
    //     height: "200px"
    // });

    // $('p').css('height', function(i) {
    //     return 50 + i * 100 + 'px';
    // }).css('background', function(i) {

    //     return i % 2 == 0 ? 'yellow' : 'orange';

    // });


    $('ul>li').css({
        height: '30px',
        width: function(i) {
            return 100 + i * 50 + 'px'
        },
        background: 'blue'
    });

    setTimeout(function() {
        // $('ul>li').remove();
        // this[li, li, li, li, li]
        $('ul>li').eq(0).remove();
        // console.log($('ul>li'));
    }, 3000);

    // console.log($('ul>li').eq(0));

    $('li').click(function(e) {
        console.log(this);
        $(this).css('background', 'red');
    });




</script>